<template>
  <span class="web_logo">
    <img :src="web_logo" />
  </span>
</template>

<script setup name="webLogo" lang="ts">
  import { defHttp } from '@/utils/http/axios';
  import { ref } from 'vue';
  import { getToken } from '@/utils/auth';
  import Logo from '@/assets/images/monitor_logo.png';
  const web_logo = ref('');
  const windowInstance: any = window;
  defHttp
    .get({
      url: '/SysConfig/Anonymous',
      params: { link: 'web_logo' },
    })
    .then((res) => {
      web_logo.value = res.data.web_logo ? windowInstance.config.base_url + res.data.web_logo : Logo;
      setIcon(web_logo.value);
    });
  function setIcon(url) {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/png';
    link.rel = 'shortcut icon';
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
  }
</script>

<style>
  .web_logo img {
    width: 100%;
    max-width: 100px;
    max-height: 100px;
    margin: 0 auto;
  }
</style>
